<template>
	<view class="integral">
		<!-- 头部 -->
		<view class="integral-head">
			<image class="star" src="https://newbeaconyt.oss-cn-hangzhou.aliyuncs.com/app/hotel/star.png" mode="">
			</image>
			<view class="head-bos">
				<view>
					<view class="font-ffffff" style="padding: 14rpx 0 30rpx 0;">
						<text class="font12">我的积分:</text>
						<text class="font20">{{integral}}</text>
					</view>
					<view class="font-787878 font10">您有500积分将于2023年12月31日到期</view>
				</view>
				<image class="image1" src="https://newbeaconyt.oss-cn-hangzhou.aliyuncs.com/app/hotel/info.png" mode="">
				</image>
			</view>
		</view>
		<!-- nav -->
		<view class="integral-nav flex-row-between">
			<view v-for="(item,index) in navList" :key="index" class="flex-column-center" @click="onPath(item.url)">
				<view class="integral-bos">
					<image :class="index===2?'image1':''" :src="item.img" mode=""></image>
				</view>
				<view class="font11 font-1e1e1e">{{item.title}}</view>
			</view>
		</view>
		<!-- 数据 -->
		<view class="integral-tab flex-row-start">
			<view v-for="(item,index) in tabList" :key="index" class="integral-list" @click="onTab(item)">
				<view>{{item.name}}</view>
				<view class="hig" v-if="tabindex === item.id"></view>
			</view>
		</view>
		<!-- 数据 -->
		<view class="integral-data flex-row-between">
			<view v-for="(item,index) in dataList" :key="index" class="data_list"
				@click="onPath('/pages/integral/info/info?id='+item.id)">
				<image :src="imgPath+item.logo" mode=""></image>
				<view class="data-bos">
					<view class="font-1e1e1e font14">{{item.name}}</view>
					<view class="font-ff6428 font13" style="margin-top: 25rpx;">
						<text v-if="item.pay_status == 1 || item.pay_status == 3">{{item.score}}</text>
						<text v-if="item.pay_status == 1 || item.pay_status == 3">积分</text>
						<text v-if="item.pay_status == 3">+</text>
						<text v-if="item.pay_status == 2 || item.pay_status == 3">￥{{item.price}}</text>

					</view>
				</view>
			</view>
			<view v-if="!goodshow" class="w100 tc font14 font-969696">我也是有底线的~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				integral: 0,
				goodshow: false, //加载
				imgPath: this.$Config.http_static, // 图片头
				httpobj: {
					page: 1,
					limit: 10,
					category_id: '',
				},
				navList: [{
						title: '积分签到',
						img: 'https://newbeaconyt.oss-cn-hangzhou.aliyuncs.com/app/hotel/nav1.png',
						url: '/pages/integral/signIn'
					},
					{
						title: '积分明细',
						img: 'https://newbeaconyt.oss-cn-hangzhou.aliyuncs.com/app/hotel/nav2.png',
						url: '/pages/integral/fine'
					},
					{
						title: '积分订单',
						img: 'https://newbeaconyt.oss-cn-hangzhou.aliyuncs.com/app/hotel/nav3.png',
						url: '/pages/integral/list'
					},
					{
						title: '积分活动',
						img: 'https://newbeaconyt.oss-cn-hangzhou.aliyuncs.com/app/hotel/nav4.png'
					}
				],
				tabindex: '',
				tabList: [],
				dataList: []
			}
		},
		onLoad() {
			wx.login({
				success: res => {
					console.log(res)
				}
			})
			this.$Http({
				url: 'categoryList',
				token: true,
			}).then(res => {
				if (res.code == 1) {
					this.tabList = res.data
					this.tabList.unshift({
						name: '全部',
						id: ''
					})
				}
			});
			this.GetData()
		},
		onShow() {
			this.$Http({
				url: 'getUserSocer',
				token: true,
			}).then(res => {
				if (res.code == 1) {
					this.integral = res.data.score ? res.data.score : 0
				}
			});
		},
		methods: {
			GetData() {
				this.$Http({
					url: 'scoreGoodsList',
					token: true,
					data: this.httpobj
				}).then(res => {
					if (res.code == 1) {
						this.dataList = this.dataList.concat(res.data.data)
						if (res.data.data.length == 0 || this.httpobj.page >= res.data.all_page) {
							this.goodshow = false
						} else {
							this.goodshow = true
						}
					}
				});
			},
			onPath(url) {
				if (url) {
					uni.navigateTo({
						url: url
					});
				} else {
					uni.showToast({
						title: '暂无活动',
						icon: 'none'
					});
				}
			},
			onTab(item) {
				this.tabindex = item.id
				this.httpobj.category_id = item.id
				this.httpobj.page = 1
				this.dataList = []
				this.GetData()
			}
		},
		onReachBottom() {
			if (this.goodshow) {
				this.httpobj.page++
				this.GetData()
			}
		},
	}
</script>

<style lang="less">
	@import url("index.less");
</style>